<template>
  <div class="amap-wrapper">
       <div v-if="show_tools" class="map-tools">
         <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box>
         <!--按钮-->
          <el-button type="primary"  @click="showMarker('community')">查看社区</el-button>
          <el-button type="primary"  @click="showMarker('hospital')">查看医院</el-button>
          <el-button type="primary"  @click="showMarker('company')">查看单位</el-button>
          <el-button type="primary"  @click="showMarker('school')">查看学校</el-button>
        </div>
       <el-amap class="amap-box" :zoom="zoom" :center="amap_center" :vid="'amap-vue-show'">
         <!--标点-->
         <el-amap-marker v-for="(marker, index) in amap_markers" :key="index" :position="marker.position" :content="marker.content"></el-amap-marker>
       </el-amap>
  </div>
</template>

<script>
  //这个组件用来展示，大数据中心
  export default{
    name:'VMapShow',
    props:['amap_center','amap_markers','change_map_center','show_marker','change_marker','show_tools'],
    data(){
      let self=this;
      return {
        zoom: 12,
        searchOption: {
          city: '通辽',
          citylimit: true
        },
      }
    },
    methods:{
       onSearchResult(pois){
          let latSum = 0;
          let lngSum = 0;
          if (pois.length > 0) {
            pois.forEach(poi => {
              let {lng, lat} = poi;
              lngSum += lng;
              latSum += lat;
              this.change_marker(poi.lng,poi.lat);
            });
            let center = {
              lng: lngSum / pois.length,
              lat: latSum / pois.length
            };
            //移动到机构中心坐标
            this.change_map_center(center.lng,center.lat);
         }
       },
        showMarker(type){
           this.show_marker(type);
        }
    }
  }
</script>

<style>
  .amap-wrapper {
    width: 100%;
    height: 500px;
    margin-top:-20px;
    margin-bottom: 20px;
  }
  .map-tools{
    position: relative;
    top: 50px;
    z-index: 10;
    left: 20px;
  }
  .search-box{
     display:inline-block;
  }
  .search-box-wrapper{
     position: relative !important;
  }

</style>
